import * as React from 'react';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import {useParams,  useNavigate
} from 'react-router-dom'
const bull = (
  <Box
    component="span"
    sx={{ display: 'inline-block', mx: '2px', transform: 'scale(0.8)' }}
  >
    •
  </Box>
);
interface BlogItemProps{
    title:string,
    id:string,
    desc:string,
    date:string,
}

export default function BlogItem(props:BlogItemProps) {
    const navigate = useNavigate();

  return (
    <Card sx={{width:0.95, margin:1 }}>
      <CardContent>
        <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
          Word of the Day
        </Typography>
        <Typography variant="h5" component="div">
          {props.title}
        </Typography>
        <Typography sx={{ mb: 1.5 }} color="text.secondary">
          {props.date}
        </Typography>
        <Typography variant="body2">
            {props.desc}
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small"  onClick={()=>{
             navigate(`/BlogDetail/${props.id}`);
        }}>Learn More</Button>
      </CardActions>
    </Card>
  );
}